<template>
  <el-card>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="材料" v-if="props.row.value['cailiao']" label-width="70px">
              <el-tag>材料单价: {{ props.row.value['cailiao'].cai_liao_dan_jia}}</el-tag>
              <el-tag>材料克重: {{ props.row.value['cailiao'].cai_liao_ke_zhong}}</el-tag>
              <el-tag>材料种类: {{ props.row.value['cailiao'].cai_liao_zhong_lei}}</el-tag>
              <el-tag>材料坑高: {{ props.row.value['cailiao'].keng_gao}}</el-tag>
              <el-tag>材料宽: {{ props.row.value['cailiao'].kuan}}</el-tag>
              <el-tag>材料数量: {{ props.row.value['cailiao'].shu_liang}}</el-tag>
              <el-tag>材料损耗数量: {{ props.row.value['cailiao'].sun_hao_shu_liang}}</el-tag>
            </el-form-item>
              <el-form-item label="印刷" v-if="props.row.value['yinshua']" label-width="70px">
                <el-tag>印刷类型: {{ props.row.value['yinshua'].type}}</el-tag>
                <el-tag>四色: {{ props.row.value['yinshua'].si_se}}</el-tag>
                <el-tag>专色: {{ props.row.value['yinshua'].zhuan_se}}</el-tag>
                <el-tag v-if="props.row.value['yinshua'].type === '普通印刷'">专色数量: {{props.row.value['yinshua'].zhuan_se_num}}</el-tag>
                <el-tag>磨砂: {{ props.row.value['yinshua'].mo_sha}}</el-tag>
                <el-tag>白墨: {{ props.row.value['yinshua'].bai_mo}}</el-tag>
                <el-tag>额外费用: {{ props.row.value['yinshua'].e_wai}}</el-tag>
              </el-form-item>
              <el-form-item label="覆膜" v-if="props.row.value['fumo']" label-width="70px">
                <el-tag>正面: {{ props.row.value['fumo'].fu_mo_zheng_mian}}</el-tag>
                <el-tag>反面: {{ props.row.value['fumo'].fu_mo_fan_mian}}</el-tag>
              </el-form-item>
              <el-form-item label="过油" v-if="props.row.value['guoyou']" label-width="70px">
                <el-tag>正面: {{ props.row.value['guoyou'].fu_mo_zheng_mian}}</el-tag>
                <el-tag>反面: {{ props.row.value['guoyou'].fu_mo_fan_mian}}</el-tag>
              </el-form-item>
              <el-form-item label="击凸" v-if="props.row.value['jitu']" label-width="70px">
                <el-tag>次数: {{ props.row.value['jitu'].ci_shu}}</el-tag>
                <el-tag>长: {{ props.row.value['jitu'].chang}}</el-tag>
                <el-tag>宽: {{ props.row.value['jitu'].kuan}}</el-tag>
              </el-form-item>
              <el-form-item label="鸡眼" v-if="props.row.value['jiyan']" label-width="70px">
                <el-tag>种类: {{ props.row.value['jiyan'].zhonglei}}</el-tag>
                <el-tag>单价: {{ props.row.value['jiyan'].price}}</el-tag>
              </el-form-item>
              <el-form-item label="模切" v-if="props.row.value['moqie']" label-width="70px">
                <el-tag>模数: {{ props.row.value['moqie'].moshu}}</el-tag>
                <el-tag>种类: {{ props.row.value['moqie'].zhonglei}}</el-tag>
                <el-tag>刀模费: {{ props.row.value['moqie'].daomofei}}</el-tag>
              </el-form-item>
              <el-form-item label="切" v-if="props.row.value['qie']" label-width="70px">
                <el-tag>种类: {{ props.row.value['qie'].zhonglei}}</el-tag>
                <el-tag>数量: {{ props.row.value['qie'].qieK}}</el-tag>
              </el-form-item>
              <el-form-item label="烫金" v-if="props.row.value['qie']" label-width="70px">
                <el-tag>长: {{ props.row.value['tangjin'].chang}}</el-tag>
                <el-tag>宽: {{ props.row.value['tangjin'].kuan}}</el-tag>
                <el-tag>次数: {{ props.row.value['tangjin'].ci_shu}}</el-tag>
                <el-tag>金纸: {{ props.row.value['tangjin'].jinzhi}}</el-tag>
              </el-form-item>
              <el-form-item label="压纹" v-if="props.row.value['yawen']" label-width="70px">
                <el-tag>种类: {{ props.row.value['yawen'].yawen}}</el-tag>
              </el-form-item>
              <el-form-item label="粘窗" v-if="props.row.value['zhanchuang']" label-width="70px">
                <el-tag>种类: {{ props.row.value['zhanchuang'].zhonglei}}</el-tag>
                <el-tag>厚度: {{ props.row.value['zhanchuang'].houdu}}</el-tag>
                <el-tag>长: {{ props.row.value['zhanchuang'].chang}}</el-tag>
                <el-tag>宽: {{ props.row.value['zhanchuang'].kuan}}</el-tag>
              </el-form-item>
              <el-form-item label="粘窗" v-if="props.row.value['zhanhe']" label-width="70px">
                <el-tag>种类: {{ props.row.value['zhanhe'].zhong_lei}}</el-tag>
                <el-tag>粘费: {{ props.row.value['zhanhe'].zhanfei}}</el-tag>
                <el-tag>开机费: {{ props.row.value['zhanhe'].kai_ji_fei}}</el-tag>
                <el-tag>拼版数: {{ props.row.value['zhanhe'].pin_ban_shu}}</el-tag>
              </el-form-item>
              <el-form-item label="折光压纹" v-if="props.row.value['zheguangyawen']" label-width="70px">
                <el-tag>需要: 是</el-tag>
              </el-form-item>
              <el-form-item label="裱纸" v-if="props.row.value.biao_ka" label-width="70px">
                <template v-if="props.row.value.biao_ka">
                  <template v-for="i in range(props.row.value.biao_ka.ceng_shu)">
                    <el-tag type="success">表卡(第{{i + 1}}层:):</el-tag>
                    <el-tag>材料单价: {{ props.row.value.biao_ka['child' + i].dan_jia }}</el-tag>
                    <el-tag>材料克重: {{ props.row.value.biao_ka['child' + i].ke_zhong }}</el-tag>
                    <el-tag>材料种类: {{ props.row.value.biao_ka['child' + i].zhi_lei }}</el-tag>
                    <el-tag>材料坑高: {{ props.row.value.biao_ka['child' + i].keng_gao }}</el-tag>
                    <el-tag>材料宽: {{ props.row.value.biao_ka['child' + i].kuan }}</el-tag>
                    <el-tag>材料数量: {{ props.row.value.biao_ka['child' + i].shu_liang }}</el-tag>
                    <el-tag>材料损耗数量: {{ props.row.value.biao_ka['child' + i].sun_hao_shu_liang }}</el-tag>
                    <el-tag>印刷: {{ props.row.value.biao_ka['child' + i].yin_shuang }}</el-tag>
                    <el-tag>后工类型: {{props.row.value.biao_ka['child' + i].hou_gong}}</el-tag>
                    <template v-if="props.row.value.biao_ka['child' + i].hou_gong === '过油'">
                      <el-tag>过油正面: {{ props.row.value.biao_ka['child' + i].guoyou_zheng_mian }}</el-tag>
                      <el-tag>过油反面: {{ props.row.value.biao_ka['child' + i].guoyou_fan_mian }}</el-tag>
                    </template>
                    <template v-if="props.row.value.biao_ka['child' + i].hou_gong === '覆膜'">
                      <el-tag>覆膜正面: {{ props.row.value.biao_ka['child' + i].fu_mo_zheng_mian }}</el-tag>
                      <el-tag>覆膜反面: {{ props.row.value.biao_ka['child' + i].fu_mo_fan_mian }}</el-tag>
                    </template>
                    <template v-if="props.row.value.biao_ka['child' + i].hou_gong === '烫金'">
                      <el-tag>烫金次数: {{ props.row.value.biao_ka['child' + i].ci_shu }}</el-tag>
                      <el-tag>烫金模数: {{ props.row.value.biao_ka['child' + i].moshu }}</el-tag>
                      <el-tag>烫金金纸: {{ props.row.value.biao_ka['child' + i].tang_jin_jin_zhi }}</el-tag>
                      <el-tag>烫金长: {{ props.row.value.biao_ka['child' + i].tang_jin_chang }}</el-tag>
                      <el-tag>烫金宽: {{ props.row.value.biao_ka['child' + i].tang_jin_kuan }}</el-tag>
                    </template>
                    <br/>
                  </template>
                </template>
                <template v-if="props.row.value.biao_keng">
                  <template v-for="i in range(props.row.value.biao_keng.ceng_shu)">
                    <el-tag type="warning">表坑(第{{i + 1}}层:):</el-tag>
                    <el-tag>材料单价: {{ props.row.value.biao_keng['child' + i].dan_jia }}</el-tag>
                    <el-tag>材料克重: {{ props.row.value.biao_keng['child' + i].ke_zhong }}</el-tag>
                    <el-tag>材料种类: {{ props.row.value.biao_keng['child' + i].zhi_lei }}</el-tag>
                    <el-tag>材料坑高: {{ props.row.value.biao_keng['child' + i].keng_gao }}</el-tag>
                    <el-tag>材料宽: {{ props.row.value.biao_keng['child' + i].kuan }}</el-tag>
                    <el-tag>材料数量: {{ props.row.value.biao_keng['child' + i].shu_liang }}</el-tag>
                    <el-tag>材料损耗数量: {{ props.row.value.biao_keng['child' + i].sun_hao_shu_liang }}</el-tag>
                    <br/>
                  </template>
                </template>
              </el-form-item>
          </el-form>
          </template>
        </el-table-column>
        <el-table-column label="订单 ID" prop="id">
        </el-table-column>
        <el-table-column label="订单创建时间" prop="insertTime">
        </el-table-column>
        <el-table-column label="创建用户" prop="insertUserId">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="props">
            <el-button type="danger" icon="el-icon-delete" circle @click="clickToDel(props.row)"></el-button>
          </template>
        </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'Order',
  mounted () {
    this.getAllOrder()
  },
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    async getAllOrder () {
      const res = await this.$http.get('/CostOfferOrder/getallorder')
      let temp = res.data.info
      for (let i = 0; i < temp.length; i++) temp[i].value = JSON.parse(temp[i].value)
      this.tableData = temp
    },
    range (k) {
      let x = []
      for (let i = 0; i < k; i++) {
        x.push(i)
      }
      return x
    },
    async clickToDel (row) {
      row.value = JSON.stringify(row.value)
      const res = await this.$http.post('/CostOfferOrder/delTemplateOrder', row)
      if (res.data.info) {
        this.$message.success('删除订单成功!')
        this.getAllOrder()
      } else {
        this.$message.error('删除失败!')
      }
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

</style>
